<template>
    <div>
        <el-table
                :data="tableData"
                border
                stripe
                :showTable="showTable"
                :height="tableHeight"
                ref="tableRef">
            <template v-if="tableCol.length > 0" v-for="(col,i) in tableCol">
                <el-table-column v-if="col.type === 'selection' " type='selection' :width="40" :key="i" style="text-align:center">
                </el-table-column>
                <el-table-column v-if="col.type === '序号' " :label="col.label" :width="60"
                                     :show-overflow-tooltip="true" :key="i">
                    <template #default="scope">
                        {{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}
                    </template>
                </el-table-column>
                <el-table-column v-if="col.type === undefined && col.Vif " :sortable="col.sortable" :prop="col.value"
                                 :label="col.label" :min-width="col.width" :show-overflow-tooltip="true" :key="i"
                                 :formatter="col.formatter">
                </el-table-column>
                <!--头像-->
                <el-table-column v-if="col.type === 'photo' && col.Vif " :label="col.label" :min-width="col.width"
                                 :show-overflow-tooltip="true" :key="i">
                    <template #default="scope">
                        <el-avatar :size="50" :src="scope.row.photo" />
                    </template>
                </el-table-column>
                <!--开关-->
                <el-table-column v-if="col.type === 'switch' && col.Vif " :label="col.label" :min-width="col.width"
                                 :show-overflow-tooltip="true" :key="i">
                    <template #default="scope">
                        <el-switch
                                v-model="scope.row[col.value]"
                                class="mb-2"
                                :active-text="col.activeText"
                                :inactive-text="col.inactiveText"
                                @click="col.click(scope.$index, scope.row)"/>
                    </template>
                </el-table-column>

                <el-table-column v-if="col.type === '操作' " :label="col.label" :min-width="col.width"
                                 style="text-align: center;" :key="i">
                    <template #default="scope" v-if="col.tButton.length > 0">
                        <el-button  v-for="(tButton) in col.tButton"
                                    v-bind:key="tButton.tName"
                                    :color="tButton.color"
                                    class="table-button"
                                    @click="tButton.tClick(scope.$index, scope.row)">{{tButton.tName}}
                        </el-button>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <div class="table-page" v-if="showPage">
            <el-pagination
                    background
                    @size-change=page.handleSizeChange
                    @current-change=page.handleCurrentChange
                    :current-page.sync="page.currentPage"
                    :page-size="page.pageSize"
                    :pager-count="page.pagerCount"
                    :page-sizes="[10, 20, 40, 60 , 80 , 100 , 200 , 1000]"
                    :layout='layout'
                    :total="page.total"
                    :prev-text='prevText'
                    :next-text='nextText'>
            </el-pagination>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'

    const selectTable  = '';
    const props = defineProps({
        // 表格数据
        tableData: {
            type: Array,
            required: null,
        },
        //是否显示表格
        showTable: {
            type: Boolean,
            required: true,
        },
        // 表头
        tableCol: {
            type: Array,
            required: null,
        },
        // 是否显示分页
        showPage: {
            type: Boolean,
            required: true,
        },
        // 是否显示统计
        showSummary: {
            type: Boolean,
            required: false,
        },
        // 表格高度
        tableHeight: {
        },
        // 分页
        page: {},
        // 表格ref
        tableRef: {
            type: String,
            required: null,
        },
        // 是否启用表格列点击事件
        isRowClick:{
            type: Boolean,
            default: ()=>{ return false }
        },
    });
    const tableRef = ref();
    const layout = 'total, sizes,prev, pager, next,jumper';
    const prevText='上一页'; // 替代图标显示的上一页文字
    const nextText='下一页'; // 替代图标显示的下一页文字


    //获取表格选中行
    const getTableSelect = ()=>{
        return tableRef.value.store.states.selection.value;
    };





    defineExpose({
        getTableSelect
    });





</script>
<style lang="scss" scoped>
    .table-page {
        width: 100%;
        height: 40px;
        margin: 20px 0 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .table-button{
        color: #FFFFFF;
    }
</style>
<style  type='text/css'>
    @import "../../assets/css/baseTable.css";
</style>
